{% extends "./inc/base.html" %}
{% block style%}
<link rel="stylesheet" href="/static/admin/js/datatables/datatables.css" type="text/css"/>
{% endblock %}
{% block content %}
<section class="hbox stretch">
    <section class="vbox">
        <header class="header bg-light dk">
            {#
            <div class="btn-group pull-right">
                <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle">
                    <span class="dropdown-label">{{ this_role.desc }}</span>
                    <span class="caret"></span>
                </button>

                <ul class="dropdown-menu dropdown-select accessselect">
                    {% for item in auth_role %}
                    <li {%if thisid== item.id %}class="active" {% endif %}><input name="d-s-r" checked="" type="radio"
                                                                                  value="/admin/auth/access/?id={{item.id}}"><a
                            href="#">{{ item.desc }}</a></li>
                    {% endfor %}
                    <li class="disabled"><input name="d-s-r" disabled="" type="radio"><a href="#">I'm disabled</a></li>

                </ul>

            </div>
            #}
            <ul class="nav nav-tabs pull-left">
            <li class="active"><a href="/admin/auth/access/?id={{controller.get('id')}}"><i class="fa fa-comments text-muted"></i> 权限设置 </a></li>
            <li class=""><a href="/admin/auth/catepriv/?id={{controller.get('id')}}"><i class="fa fa-user text-muted"></i> 栏目管理</a></li>
                <li class=""><a href="/admin/auth/userlist/?id={{controller.get('id')}}"><i class="fa fa-user text-muted"></i> 成员管理</a></li>
        </ul>
        </header>
        <section class="scrollable wrapper">
            <form action="/admin/auth/writerole" enctype="application/x-www-form-urlencoded" method="POST"
                  class="form-horizontal auth-form" data-validate="parsley">
                <div id="category_tree"></div>
                <input type="hidden" name="id" value="{{thisid}}"/>
                <button type="submit" class="btn submit-btn ajax-post" target-form="form-horizontal">确 定</button>
                <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
            </form>

        </section>
    </section>

</section>
{% endblock%}

{% block script%}
<script src="/static/admin/js/datatables/jquery.dataTables.min.js"></script>
<script src="/static/admin/js/datatables/jquery.csv-0.71.min.js"></script>
<script src="/static/admin/js/parsley/parsley.min.js"></script>
<script src="/static/admin/js/parsley/parsley.extend.js"></script>
<script src="/static/admin/js/datatables/auth.js"></script>

<script>
    +function ($) {
        /* 生成HTML ul/li 形式 */
        function category_to_html(nodes, mian) {
            var html = [];
            var size = nodes.length;
            var left = null;
            var right = null;
            var text;
            var stack = [];

            html.push("<ul>");

            for (var i = 0; i < size; i++) {
                left = nodes[i];

                //text = [left["id"],left["title"]].join(",");
                text = '<span><label class="checkbox-inline i-checks">\
            <input class="auth_rules" type="checkbox" name="rules" value="' + mian[left.url] + '" ><i></i>\
                    ' + left['title'] +  '\
                    </label></span>';
                if (i + 1 < size) {
                    right = nodes[i + 1];
                    /* 入深 */
                    if (left["deep"] < right["deep"]) {
                        html.push("<li class='parent_li'>");
                        html.push(text);
                        html.push("<ul>");
                        stack.push(1);
                    } else {
                        html.push("<li>");
                        html.push(text);
                        html.push("</li>");
                    }
                    /* 逐层跳出 */
                    if (left["deep"] > right["deep"]) {
                        for (var j = 0; j < left["deep"] - right["deep"]; j++) {
                            stack.pop();
                            html.push("</ul>");
                            html.push("</li>");
                        }
                    }
                } else {
                    if (stack.length > 0) {
                        html.push("<li>");
                        html.push(text);
                        html.push("</li>");
                        while (stack.pop()) {
                            html.push("</ul>");
                            html.push("</li>");
                        }
                    } else {
                        html.push("<li>");
                        html.push(text);
                        html.push("</li>");
                    }
                }
            }
            html.push("</ul>");
            return html.join("\n");
        }

        var id = $("input[name='id']").val();
        $.ajax({
            type: "POST",
            url: "/admin/auth/accessdata",
            data: {id: id},
            success: function (msg) {
                /* 展示生成的HTML */
                $("#category_tree").html(category_to_html(msg.node_list, msg.main_rules));

            }
        }).done(function (e) {
            var rules = e.this_role.rule_ids;
            if(rules){
            rules = rules.split(",");
            }
            $('.auth_rules').each(function () {
                if ($.inArray(this.value, rules) > -1) {
                    $(this).prop('checked', true);
                }
                if (this.value == '') {
                    $(this).closest('span').remove();
                }
            });
            //全选节点
            $('.parent_li span input').on('change', function () {
                $(this).closest('li').find('ul').find('input').prop('checked', this.checked);
            });

            $('.accessselect li').on('click', function () {
                location.href = $(this).find("input").val();
            });
        });

    }(jQuery);
</script>
{% endblock %}